<template>
    <view>
       
        <view class="main">
            <view class="grxx">
                <view class="yhq" v-for="record in consumptionRecords" :key="record.id">
                    <view>
                        <view class="title">
                            {{ record.title }}
                        </view>
                        <view class="time">
                            {{ record.time }}
                        </view>
                    </view>
                    <view class="money">
                        您已成功支付{{ record.money }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义响应式数据
const statusBarHeight = ref(0);
const consumptionRecords = ref([
    {
        id: 1,
        title: '支付成功通知',
        time: '2025.3.1 11:09',
        money: '-50元'
    },
    {
        id: 2,
        title: '支付成功通知',
        time: '2025.2.21 11:09',
        money: '-50元'
    },
    {
        id: 3,
        title: '支付成功通知',
        time: '2025.1.23 11:09',
        money: '-50元'
    },
    {
        id: 4,
        title: '支付成功通知',
        time: '2025.1.1 11:09',
        money: '-50元'
    },
    {
        id: 5,
        title: '支付成功通知',
        time: '2024.12.11 11:09',
        money: '-50元'
    }
]);

// 生命周期钩子，在组件挂载后执行
onMounted(() => {
    // 获取手机状态栏高度
    statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
});

// 返回上一页的方法
const fanHui = () => {
    uni.navigateBack({
        delta: 1
    });
};
</script>

<style scoped>
.navBarBox {
    background-size: contain;
    background-color: #fff;
    color: #000000;
    height: 400rpx;
}

.navBar {
    display: flex;
    justify-content: space-between;
    padding: 3rpx 20rpx;
    padding-bottom: 8rpx;
}

.navBarBox .navBar .zjt {
    width: 50rpx;
    height: 50rpx;
    margin: 20rpx 0 40rpx;
}

.navBarBox .navBar .grzx {
    margin: 20rpx 0 40rpx;
    font-size: 36rpx;
    position: absolute;
    right: 310rpx;
}

.main {
    padding: 25px 20rpx;
}

.grxx {
    padding: 0 30rpx;
    position: relative;
    bottom: 240rpx;
    background-color: #fff;
    border-radius: 20rpx;
}

.yhq {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    padding: 40rpx 0;
    border-bottom: 10rpx solid #F7F7F7;
}

.yhq:last-child {
    border: 0;
}

.title {
    font-weight: bold;
}

.time {
    font-size: 28rpx;
    margin-top: 20rpx;
    color: #808080;
}

.money {
    font-weight: bold;
}
</style>